/*
 * @Author: fhw
 * @Date: 2022-04-29 17:27:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-12-30 11:07:38
 * @Description:
 */
import { isEmpty, isNil } from 'ramda'
import { defineComponent, onMounted, onUnmounted, PropType, reactive, ref, watch } from 'vue'
import '../style.scss'
const props = {
	visible: {
		type: Boolean as PropType<boolean>,
		required: true,
	},
	position: {
		type: Object as PropType<{ x: number; y: number }>,
		required: true,
	},
	queryString: {
		type: String as PropType<string>,
		required: true,
	},
	mockData: {
		type: Array as PropType<Array<any>>,
		default: [],
	},
} as const
export default defineComponent({
	props,
	emits: ['pickUser', 'hide'],
	setup(props, { emit }) {
		const pageState = reactive({
			users: [],
			index: 0,
			mockList: [] as Array<any>,
		})
		watch(
			() => props.mockData,
			(value) => {
				if (isNil(value) || isEmpty(value)) return
				pageState.mockList = value
			},
			{
				deep: true,
				immediate: true,
			}
		)
		const usersRef = ref<Element>()
		function clickAt(e: any, item: { nickname: any; id: any }) {
			const user = {
				nickname: item.nickname,
				id: item.id,
				headimgurl: pageState.mockList[pageState.index].headimgurl,
			}
			emit('pickUser', user)
			pageState.index = 0
		}
		function hoverAt(index: number) {
			pageState.index = index
		}
		function keyDownHandler(e: { code: string }) {
			if (e.code === 'Escape') {
				emit('hide')
				return
			}
			// 键盘按下 => ↓
			if (e.code === 'ArrowDown') {
				if (pageState.index >= pageState.mockList.length - 1) {
					pageState.index = 0
				} else {
					pageState.index = pageState.index + 1
				}
			}
			// 键盘按下 => ↑
			if (e.code === 'ArrowUp') {
				if (pageState.index <= 0) {
					pageState.index = pageState.mockList.length - 1
				} else {
					pageState.index = pageState.index - 1
				}
			}
			// 键盘按下 => 回车
			if (e.code === 'Enter') {
				if (pageState.mockList.length) {
					const user = {
						nickname: pageState.mockList[pageState.index].nickname,
						id: pageState.mockList[pageState.index].id,
						headimgurl: pageState.mockList[pageState.index].headimgurl,
					}
					emit('pickUser', user)
					pageState.index = -1
				}
			}
		}
		watch(
			() => props.queryString,
			(val) => {
				val
					? (pageState.mockList = props.mockData.filter(({ nickname }) => nickname.startsWith(val)) as any[])
					: (pageState.mockList = props.mockData.slice(0) as any[])
			}
		)
		onMounted(() => {
			document.addEventListener('keyup', keyDownHandler)
		})
		// 销毁
		onUnmounted(() => {
			document.removeEventListener('keyup', keyDownHandler)
		})
		return () => (
			<div>
				{pageState.mockList?.length > 0 && (
					<div
						class="wrapper"
						style={{ position: 'fixed', top: props.position.y + 'px', left: props.position.x + 'px' }}
					>
						{pageState.mockList?.map((item, i) => {
							return (
								<div
									class={['item', i === pageState.index && 'active']}
									ref={usersRef}
									onClick={(e) => clickAt(e, item)}
									onMouseenter={() => hoverAt(i)}
								>
									<div class="name">
										<img src={item.headimgurl} alt="" />
										{item.nickname}
									</div>
								</div>
							)
						})}
					</div>
				)}
			</div>
		)
	},
})
